<script lang="ts" setup>
import UseWallet from "@/web3";
import { ref, toRefs, watch } from "vue";
import { getItem } from "@/utils/utils";
import { copy } from "@/utils/copy";
const props = defineProps<{
  visible: boolean;
}>();
const emits = defineEmits<{
  (e: "update:visible", data: boolean): void;
  (e: "success", data: boolean): void;
  (e: "cancel"): void;
}>();
const urls = window.location.origin;
const { visible } = toRefs(props);
const newVisible = ref(visible.value);
if (visible) {
  watch(visible, () => {
    if (newVisible.value != visible?.value) {
      newVisible.value = visible?.value;
    }
  });
}
</script>

<template>
  <div class="popupLogin">
    <van-popup v-model:show="visible" @close="emits('update:visible', false)">
      <div class="popupLoginMain">
        <div class="titleBox">邀请好友</div>
        <div class="inputHint h30">
          我的邀请码：{{ JSON.parse(getItem("userInfo")).invit_code }}
        </div>
        <div class="inputHint h10">邀请好友加入Splay</div>
        <div class="inputHint1 h10">电邮地址或用户名</div>
        <div class="inputHint1 h10">好友通过邀请码注册Splay</div>
        <div class="inputHint1 h10">
          绑定邀请关系后，好友在平台的有效游戏，邀请人可获得邀请奖励
        </div>
        <div class="btnAll flex items-center">
          <van-button
            @click="
              copy(
                urls +
                  '/#/?inviteCode=' +
                  JSON.parse(getItem('userInfo')).invit_code
              )
            "
            class="confrim flex-1"
            >复制邀请链接</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";

.popupLogin {
  :deep(.van-popup) {
    display: flex;
    justify-content: center;
    background-color: transparent;
  }

  .popupLoginMain {
    width: 690 * $_ru;
    padding: 30 * $_ru;
    border-radius: 24 * $_ru;
    background: var(---100, #1a2c38);

    .titleBox {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 36 * $_ru;
      font-weight: bold;
    }

    .inputHint {
      color: #b1bad3;
      font-size: 28 * $_ru;
      font-weight: bold;
    }
    .inputHint1 {
      color: #b1bad3;
      font-size: 24 * $_ru;
      font-weight: 400;
    }
    .h30 {
      margin-top: 30 * $_ru;
    }
    .h10 {
      margin-top: 10 * $_ru;
    }
    .btnAll {
      display: flex;
      align-items: center;
      margin-top: 30 * $_ru;
      .confrim {
        height: 96 * $_ru;
        border-radius: 80 * $_ru;
        border: 1px solid var(--1-icon, #1b202a);
        background-color: #2e4d6f;
        color: var(---100, #fff);
        text-align: center;
        font-family: PingFang SC;
        font-size: 32 * $_ru;
        font-style: normal;
        font-weight: 400;
        line-height: 96 * $_ru;
      }
    }
  }
}
</style>
